<template>
  <div style="height: calc(100% - 44px)">
    <ul class="accordion">
      <li v-for="(item,index) in tree" :key="index">
        <div>
          <div class="link" @click="check(item)">
            <i :class="'fa fa-chevron-down '+(item.open?'openImg':'')" @click.stop="openAccordion(item)"
            v-if="showarrow(item)"></i>{{item[name]}}
            <!-- v-if="item[soncount] || item[sub]"></i>{{item[name]}} -->
            <check-icon type="plain" :value="checked.includes(item[field])" style="float:right" v-if="checkbox"></check-icon>
          </div>
          <div :class="'submenu '+(item.open?'openChild':'')">
            <dept-tree-root v-if="item[children]" :list="item[children]" :value="checked" :checkbox="checkbox" :name="name"
              :children="children" :loadData="loadData" :depts="depts" :multiple="multiple"></dept-tree-root>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "deptTreeRoot",
    props: {
      //部门-人员数据
      list: {
        type: Array,
        default () {
          return []
        }
      },
      //已选列表
      value: {
        type: Array,
        default () {
          return []
        }
      },
      //保存选择的对象
      depts: {
        type: Array,
        default () {
          return []
        }
      },
      checkbox: {
        type: Boolean,
        default () {
          return false
        }
      },
      children: {
        type: String,
        default: 'sub'
      },
      name: {
        type: String,
        default: 'dn'
      },
      loadData: {
        type: Boolean,
        default () {
          return false
        }
      },
      multiple: {
        type: Boolean,
        default () {
          return false
        }
      }
    },
    data() {
      return {
        checked: this.value,
        tree: JSON.parse(JSON.stringify(this.list)),
      }
    },
    methods: {
      openAccordion(item) {
        if (this.loadData && !item.open) {
          if (item.soncount > 0 && !item[this.children]) {
            this.$store.dispatch('getDept', {
              id: item.id,
              callback: (data) => {
                this.$set(item, 'sub', data)
              }
            })
          }
        }
        this.$nextTick(() => {
          this.$set(item, 'open', !item.open)
        })
      },
      //勾选
      check(val) {
        if (this.multiple) {
          if (!this.checked.includes(val.dn)) {
            this.depts.push(val)
            this.checked.push(val.dn)
          } else {
            this.store.splice(this.depts.findIndex(item => item === val), 1)
            this.checked.splice(this.checked.findIndex(item => item === val.dn), 1)
          }
        } else {
          if (!this.checked.includes(val.dn)) {
            this.depts.splice(0, 1, val)
            this.checked.splice(0, 1, val.dn)
          } else {
            this.depts.splice(this.depts.findIndex(item => item === val), 1)
            this.checked.splice(this.checked.findIndex(item => item === val.dn), 1)
          }
        }

        this.$emit('input', this.checked)
      },
      getValues(val) {
        return this.depts.map(item => {
          return item[val]
        }).join(',')
      },
      showarrow(item){
        if(item.sub){
          if(item.sub.length){
            return true;
          }
        }
        if(item.soncount){
          return true;
        }
        return false;
      }
    },
    computed: {
      field() {
        return this.checkbox ? 'dn' : 'id';
      }
    },
    watch: {
      value() {
        this.checked = this.value;
      },
      list() {
        this.tree = JSON.parse(JSON.stringify(this.list));
      }
    }
  }

</script>

<style scoped>
  .accordion {
    height: 97%;
    width: 100%;
    margin: 0 auto;
    background: #FFF;
  }

  .accordion .link {
    display: block;
    padding: 15px 15px 15px 42px;
    font-size: 14px;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .link:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .link:active {
    background-color: #ECECEC;
  }

  .accordion li i {
    position: absolute;
    left: 12px;
    top: 50%;
    margin-top: -8px;
    font-size: 16px;
    color: #999999;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .accordion li i.fa-chevron-down {
    font-size: 16px;
  }

  .openImg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /**
   * Submenu
   -----------------------------*/
  .submenu {
    overflow: hidden;
    padding: 0 10px;
    opacity: 0;
    max-height: 0px;
    font-size: 14px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

  .openChild {
    max-height: 10000vh;
    opacity: 1;
    display: block;
  }

  li {
    list-style-type: none;
  }

  .accordion .noline::before {
    border-top: 0;
  }

</style>
